import React from 'react'
import { Row, Col, Spin } from 'antd'
import { Typography } from 'antd'
import {
  SlideMenu,
  Carousel,
  ProductCollection,
  BusinessPartners
} from '../../components'
import { withTranslation, WithTranslation } from 'react-i18next'
import slideImage1 from '../../assets/images/sider_2019_12-09.png'
import slideImage2 from '../../assets/images/sider_2019_02-04.png'
import slideImage3 from '../../assets/images/sider_2019_02-04-2.png'
import { giveMeDataActionCreator } from '../../redux/recommendProducts/recommendProductsActions'

import { RootState } from '../../redux/store'
import { connect } from 'react-redux'
import { MainLayout } from '../../layout/MainLayout'
const mapStateToProps = (state: RootState) => {
  return {
    productList: state.recommendProducts.productionList,
    loading: state.recommendProducts.loading,
    error: state.recommendProducts.error
  }
}
const mapDispatchToProps = (dispatch) => {
  return {
    giveMeData: () => {
      dispatch(giveMeDataActionCreator())
    }
  }
}
type PropsType = WithTranslation &
  ReturnType<typeof mapStateToProps> &
  ReturnType<typeof mapDispatchToProps>
class HomeComponent extends React.Component<PropsType> {
  componentDidMount() {
    const { giveMeData } = this.props
    giveMeData()
  }
  render(): React.ReactNode {
    const { t, productList, loading, error } = this.props
    if (loading) {
      return (
        <Spin
          size="large"
          style={{
            marginTop: 200,
            marginBottom: 200,
            marginLeft: 'auto',
            marginRight: 'auto',
            width: '100%'
          }}
        ></Spin>
      )
    }
    if (error) {
      return <div>网站出错：{error}</div>
    }
    return (
      <MainLayout>
        <Row style={{ marginTop: 20 }}>
          <Col span={6}>
            <SlideMenu />
          </Col>
          <Col span={18}>
            <Carousel />
          </Col>
        </Row>
        <ProductCollection
          title={
            <Typography.Title level={3} type="warning">
              {t('home_page.hot_recommended')}
            </Typography.Title>
          }
          slideImage={slideImage1}
          products={productList[0].touristRoutes}
        />
        <ProductCollection
          title={
            <Typography.Title level={3} type="danger">
              {t('home_page.new_arrival')}
            </Typography.Title>
          }
          slideImage={slideImage2}
          products={productList[1].touristRoutes}
        />
        <ProductCollection
          title={
            <Typography.Title level={3} type="success">
              {t('home_page.domestic_travel')}
            </Typography.Title>
          }
          slideImage={slideImage3}
          products={productList[2].touristRoutes}
        />
        <BusinessPartners />
      </MainLayout>
    )
  }
}

export const Home = connect(
  mapStateToProps,
  mapDispatchToProps
)(withTranslation()(HomeComponent))
